<template>
  <el-dialog title="广告投放链接" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="880px">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="平台" prop="plate_id">
        <el-select
          v-model="queryParams.plate_id"
          placeholder="请选择平台"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in platformList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="版位" prop="position_id">
        <el-select
          v-model="queryParams.position_id"
          placeholder="请选择版位"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in advertTypeList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
      </el-form-item>
    </el-form>
    <ul class="adType" v-if="linksList && linksList.length>0">
      <li v-for="(item,index) in linksList" :key="index">
        <span>{{item.name}}</span>
        <div class="links">{{item.url}}</div>
        <div class="copy-btn" @click="copyMsgInfo(item.url)">复制</div>
      </li>

    </ul>
    <div v-else class="nodata"><img src="../../assets/images/nodata.jpg"/></div>
    <pagination
      v-show="total>10"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script>
  import { reqPlateList, reqGgetPlanPosition, reqPlanTaskIndex } from '@/api/advergroupPlanMgt/index'

  export default {
    name: 'viewAdLinks',
    data() {
      return {
        platformList: [],//平台
        advertTypeList: [],//版位
        linksList: [],
        total: 8,// 表格的总条数
        statusList: [],
        queryParams: {
          page: 1,
          num: 10,
          plate_id: null,//平台id
          position_id: null,//版位id
          id: this.$attrs.planId//计划id

        }
      }
    },
    created() {
      this.getPlateList()//平台
      this.getAdTypeList()//广告组类型
      this.$nextTick(() => {
        setTimeout(()=>{
          this.getList()//获取列表
        },0)

      })

    },
    methods: {
      getAdTypeList() {
        this.advertTypeList = []
        reqGgetPlanPosition().then(res => {
          let data = res.data
          data.forEach(item => {
            let obj = {
              id: item.id,
              name: item.name
            }
            this.advertTypeList.push(obj)
          })
          console.log('广告组类型', this.advertTypeList)
        })
      },
      getPlateList() {
        //获取平台
        reqPlateList().then(res => {
          console.log('平台数据', res.data)
          this.platformList = res.data;

        })
      },
      copyText(value, that) {
        const aux = document.createElement('input')
        aux.setAttribute('value', value)
        document.body.appendChild(aux)
        aux.select()
        document.execCommand('copy')
        document.body.removeChild(aux)
        that.$message.success('复制成功')
      },
      copyMsgInfo(data) {
        console.log(data)
        const value = data.toString()
        const filterVal = value.replace(/\<br\/\>/g, '\n\n')
        console.log('replace', filterVal)
        // filterVal 表示要复制的内容
        this.copyText(filterVal, this) // 这个是调用方法
      },
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      getList() {
        this.linksList = []
        this.loading = true
        let form = JSON.parse(JSON.stringify(this.queryParams));
        if (!form.plate_id) {
          delete form.plate_id
        }
        if (!form.position_id) {
          delete form.position_id
        }
        reqPlanTaskIndex(form).then(res => {
            this.linksList = res.data.list
            this.total = res.data.count

          this.platformList.forEach(sitem => {
            this.linksList.forEach(item => {
              if (sitem.id == item.plate_id) {
                if (sitem.url.indexOf('http') > -1) {
                  item.url = sitem.url;
                } else {
                  item.url = `https://`+sitem.url;
                }

              }
            });
          })
            console.log('拼接后的', this.linksList)
            this.loading = false
          }
        )
      },
      //重置表单
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      handleCloseDialog() {
        this.$emit('update:visableIf', false)
        this.$emit('handleCloseFilter') //关闭弹窗;
      }
    }
  }
</script>

<style scoped lang="scss">
  .adType {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    padding: 0px;
    margin: 0px;

    li {
      display: flex;
      line-height: 20px;
      padding: 10px 10px;
      border-bottom: 1px solid #eee;
      padding-right: 70px;

      > span {
        width: 135px;
        display: flex;
        position: relative;
        margin-right: 10px;
        justify-content: center;

        &:after {
          content: '';
          position: absolute;
          right: 0px;
          top: -5px;
          bottom: -5px;
          background: #eee;
          width: 1px;
        }
      }

      .links {
        flex: 1;
        justify-content: center;
        display: flex;
      }

      .copy-btn {
        width: 42px;
        height: 23px;
        background: #1670F1;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 30px;
        cursor: pointer;
      }
    }
  }

  .nodata {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 300px;
      height: auto;
    }
  }
</style>
